<template>
  <BdpLayout>
    <BdpLayoutPanel style="overflow-y: auto; scrollbar-width: none; overflow-x: hidden" :left="width" resize="H">
      <BdpLayoutPanel height="40" resize="V" resizePosition="bottom" style="text-align: right">
        <el-row style="text-align: right">
          <span style="margin-right: 4px; display: inline-block">自动刷新：</span>
          <a-switch v-model="autoRefresh" />
          <a-select v-model="refreshInterval" style="width: 100px; margin-left: 10px" v-if="autoRefresh">
            <a-select-option :value="60">1分钟</a-select-option>
            <a-select-option :value="120">2分钟</a-select-option>
            <a-select-option :value="180">3分钟</a-select-option>
          </a-select>
        </el-row>
      </BdpLayoutPanel>
      <BdpLayoutPanel :top="40" height="100px" resize="V" resizePosition="bottom">
        <BdpLayoutPanel width="33.33%" resize="H" resizePosition="right"></BdpLayoutPanel>
        <BdpLayoutPanel left="33.33%" width="33.33%" resize="H" resizePosition="right"></BdpLayoutPanel>
        <BdpLayoutPanel left="66.67%" width="33.33%" resize="H"></BdpLayoutPanel>
        <div class="container">
          <div class="card">
            <div class="icon">
              <img src="../../../../../public/static/img/u1015.png" />
            </div>
            <div class="info">
              当前MBOM总条数
              <div class="number">{{ bomNum }}</div>
            </div>
          </div>
          <div class="card">
            <div class="icon">
              <img src="../../../../../public/static/img/u1015.png" />
            </div>
            <div class="info">
              零件总数
              <div class="number">{{ componentNum }}</div>
            </div>
          </div>
          <div class="card">
            <div class="icon">
              <img src="../../../../../public/static/img/u1015.png" />
            </div>
            <div class="info">
              MBOM总层级
              <div class="number">{{ bomTotalLevel }}</div>
            </div>
          </div>
        </div>
      </BdpLayoutPanel>
      <BdpLayoutPanel :top="140" height="700" resize="V" style="margin-top: 20px">
        <div style="width: 100%; margin-top: 20px; padding: 5px">
          <a-row type="flex" justify="space-between" align="middle" style="margin-bottom: 16px">
            <a-col :span="5">
              <span style="margin-right: 4px; display: inline-block">零件名称：</span>
              <a-input-search v-model="partname" style="width: 60%; display: inline-block" />
            </a-col>
            <a-col :span="5">
              <span style="margin-right: 4px; display: inline-block">零组件号：</span>
              <a-input-search v-model="partcode" style="width: 60%; display: inline-block" />
            </a-col>
            <a-col :span="5">
              <span style="margin-right: 4px; display: inline-block">层次：</span>
              <a-input-search v-model="cmlevel" style="width: 60%; display: inline-block" />
            </a-col>
            <a-col :span="5">
              <span style="margin-right: 4px; display: inline-block">零件代码：</span>
              <a-input-search v-model="partnum" style="width: 60%; display: inline-block" />
            </a-col>
            <a-col :span="4" style="text-align: left">
              <a-button type="primary" @click="handelSearch">搜索</a-button>
              <a-button style="margin-left: 4px" @click="resetFields">重置</a-button>
            </a-col>
          </a-row>
        </div>
        <a-table
          :columns="columns"
          :data-source="data"
          rowKey="sapMatNo"
          :pagination="pagination"
          :scroll="{ x: 'max-content', y: 500 }"
          @change="handleTableChange"
          style="margin-top: 20px; height: auto"
        >
        </a-table>
      </BdpLayoutPanel>
    </BdpLayoutPanel>
  </BdpLayout>
</template>
<script>
import { getOdsApiSfSzfjOnetimeCount, getOdsApiSfSzfjOnetimePage } from '@bdp/dataDetails/componentInformation/api';

export default {
  name: 'DirectoryMaintenance',
  permissionList: [],
  data() {
    return {
      autoRefresh: false,
      refreshInterval: 60, // 默认1分钟
      refreshTimer: null, // 用于存储定时器
      expandedKeys: [], // 当前展开的节点
      defaultExpandedKeys: [], // 默认展开的节点
      cmlevel: '',
      partname: '',
      partcode: '',
      partnum: '',
      componentNum: 0,
      bomTotalLevel: 0,
      bomNum: 0,
      width: 0,
      height: 300,
      treeData: [],
      treePath: null,
      value: '',
      strValue: '',
      pagination: {
        current: 1,
        pageSize: 10,
        total: 50, // 总条数
        showSizeChanger: true,
        showQuickJumper: true,
        right: 0,
        bottom: 0,
      }, //表格分页
      columns: [
        {
          title: '批次号',
          dataIndex: 'batchId',
          key: 'batchId',
          width: 120,
          align: 'center',
        },
        {
          title: '序号',
          dataIndex: 'cmkeyid',
          key: 'cmkeyid',
          width: 120,
          align: 'center',
        },
        {
          title: '层级',
          dataIndex: 'cmlevel',
          key: 'cmlevel',
          width: 120,
          align: 'center',
        },
        {
          title: '数量',
          dataIndex: 'qty',
          key: 'qty',
          width: 120,
          align: 'center',
        },
        {
          title: '架次范围',
          dataIndex: 'flynumrange',
          key: 'flynumrange',
          width: 120,
          align: 'center',
        },
        {
          title: '零件号',
          dataIndex: 'partnum',
          key: 'partnum',
          fixed: 'left',
          width: 120,
          align: 'center',
        },
        {
          title: '零件名称',
          dataIndex: 'partname',
          key: 'partname',
          width: 120,
          align: 'center',
        },
        {
          title: '零组件号',
          dataIndex: 'partcode',
          key: 'partcode',
          width: 120,
          align: 'center',
        },
        {
          title: '版次',
          dataIndex: 'partversion',
          key: 'partversion',
          width: 120,
          align: 'center',
        },
        {
          title: 'AO号',
          dataIndex: 'aonum',
          key: 'aonum',
          width: 120,
          align: 'center',
        },
        {
          title: 'AO版本',
          dataIndex: 'aoversion',
          key: 'aoversion',
          width: 120,
          align: 'center',
        },
        {
          title: '分类',
          dataIndex: 'kind',
          key: 'kind',
          width: 120,
          align: 'center',
        },
        {
          title: '使用部门',
          dataIndex: 'useddept',
          key: 'useddept',
          width: 120,
          align: 'center',
        },
        {
          title: '材料牌号',
          dataIndex: 'materialnum',
          key: 'materialnum',
          width: 120,
          align: 'center',
        },
        {
          title: '毛料尺寸',
          dataIndex: 'materialsize',
          key: 'materialsize',
          width: 120,
          align: 'center',
        },
        {
          title: '材料规范',
          dataIndex: 'materialspec',
          key: 'materialspec',
          width: 120,
          align: 'center',
        },
        {
          title: '备注',
          dataIndex: 'note',
          key: 'note',
          width: 120,
          align: 'center',
        },
        {
          title: '首次更新时间',
          dataIndex: 'updatetime',
          key: 'updatetime',
          width: 120,
          align: 'center',
        },
      ],
      data: [],
    };
  },
  mounted() {
    // this.getTreeData();
    //初始化列表数据
    this.getTableList();
    //初始化卡片上数据
    this.initIndexCard();
    console.log('treeData', this.treeData);
  },
  watch: {
    autoRefresh(newVal) {
      if (newVal) {
        console.log(newVal);
        this.startAutoRefresh();
      } else {
        this.stopAutoRefresh();
      }
    },
    refreshInterval() {
      this.restartAutoRefresh(); // 刷新间隔改变时重启定时器
    },
  },
  methods: {
    startAutoRefresh() {
      console.log('开始刷新');
      this.refreshTimer = setInterval(() => {
        this.getTableList();
        this.initIndexCard();
      }, this.refreshInterval * 1000);
    },
    stopAutoRefresh() {
      console.log('停止刷新');
      if (this.refreshTimer) {
        clearInterval(this.refreshTimer);
        this.refreshTimer = null;
      }
    },
    restartAutoRefresh() {
      this.stopAutoRefresh();
      if (this.autoRefresh) {
        this.startAutoRefresh();
      }
    },
    /** 查询*/
    handelSearch() {
      this.getTableList();
      console.log('查询参数：', this.searchForm);
    },
    /** 重置按钮*/
    resetFields() {
      (this.partname = ''),
        (this.partcode = ''),
        (this.cmlevel = ''),
        (this.partnum = ''),
        (this.pagination.current = 1);
      this.getTableList();
    },
    /** 分页 */
    handleTableChange(pagination, filters, sorter) {
      this.pagination.pageSize = pagination.pageSize;
      this.pagination.current = pagination.current;
      this.getTableList();
      console.log(pagination);
    },
    //列表数据
    getTableList() {
      getOdsApiSfSzfjOnetimePage({
        pageSize: this.pagination.pageSize,
        pageNum: this.pagination.current,
        cmlevel: this.cmlevel,
        partname: this.partname,
        partcode: this.partcode,
      }).then((res) => {
        this.data = res.data.list;
        this.pagination.total = res.data.total;
      });
    },
    // 指标卡数据
    initIndexCard() {
      getOdsApiSfSzfjOnetimeCount({ groupId: this.treePath }).then((res) => {
        this.componentNum = res.data.partCount;
        this.bomTotalLevel = res.data.levelCount;
        this.bomNum = res.data.bmomCount;
      });
    },
    draggingover(len) {
      this.width = len;
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px; /* 控制卡片之间的间距 */
}
.card {
  margin-top: -10px;
  padding: 16px;
  width: calc(33.333% - 30px); /* 减去间距以适应每行三个 */
  box-sizing: border-box;
  text-align: center;
  font-family: Arial, sans-serif;
  display: flex;
  height: 70%;
}
.icon {
  width: 56px;
  height: 56px;
  background-color: #007bff;
  border-radius: 50%;
  display: inline-block;
  margin-top: 10px;
}
.icon img {
  width: 56px;
  height: 56px;
  vertical-align: middle;
}
.number {
  font-size: 32px;
  font-weight: bold;
  margin: 8px 0;
}
.info {
  font-size: 14px;
  color: #666;
  margin-left: 50px;
}
</style>
